<!--
 * @Author: songxiang songxiang0806@qq.com
 * @Date: 2025-08-21 11:12:26
 * @LastEditors: songxiang songxiang0806@qq.com
 * @LastEditTime: 2025-09-03 17:45:37
 * @FilePath: \supermap-webgl\src\components\viewshed\viewshed.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <menus-container title="辅助监控选址" position="right" style="width: 400px">
    <el-row>
      <el-button type="primary" @click="onStart">选取分析点</el-button>
      <el-button type="primary" @click="onClear">清除</el-button>
    </el-row>
    <el-divider border-style="dashed" />
    <el-form
      label-width="auto"
      label-position="top"
      size="small"
      v-if="viewshedFlag == 'done'"
    >
      <el-form-item label="方向(度)">
        <el-slider
          :min="0"
          :max="360"
          :step="0.1"
          v-model="viewshedOptions.direction"
          show-input
          input-size="small"
        />
      </el-form-item>
      <el-form-item label="翻转(度)">
        <el-slider
          :min="-90"
          :max="90"
          :step="0.1"
          v-model="viewshedOptions.pitch"
          show-input
          input-size="small"
        />
      </el-form-item>
      <el-form-item label="距离(米)">
        <el-slider
          :min="1"
          :max="2000"
          :step="0.1"
          v-model="viewshedOptions.distance"
          show-input
          input-size="small"
        />
      </el-form-item>
      <el-form-item label="水平视场角(度)">
        <el-slider
          :min="0"
          :max="360"
          :step="0.1"
          v-model="viewshedOptions.horizontalFov"
          show-input
          input-size="small"
        />
      </el-form-item>
      <el-form-item label="垂直视场角(度)">
        <el-slider
          :min="0"
          :max="180"
          :step="0.1"
          v-model="viewshedOptions.verticalFov"
          show-input
          input-size="small"
        />
      </el-form-item>
      <el-form-item label="可见区域颜色">
        <el-color-picker v-model="viewshedOptions.visibleColor" />
      </el-form-item>
      <el-form-item label="不可见区域颜色">
        <el-color-picker v-model="viewshedOptions.hideColor" />
      </el-form-item>
    </el-form>
  </menus-container>
</template>

<script lang="ts" setup>
import {} from 'vue'
import MenusContainer from '/@src/components/menus-container/menus-container.vue'

import useVeiwshed from './use-veiwshed'

const { viewshedOptions, viewshedFlag, onStart, onClear } = useVeiwshed()
</script>

<style scoped lang="scss">
@import url('./viewshed.scss');
</style>
